<template>
  <div ref="chart" id="chart-data" class="w-full h-[400px] max-h-[50vh]"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import { onMounted, onUnmounted, ref } from "vue";
import request from "../../request";
import CustomChart from "./components/CustomChart.vue";

const chartData = ref<any[]>([]);
let object: any = null;

onMounted(() => {
  getData();
  window.addEventListener("resize", resizeChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeChart);
});

const resizeChart = () => {
  object.resize();
};

const getData = async () => {
  let param = {
    fuck: "qilin",
  };
  let result = await request.post("pbLoginRecord/chartDates", param);
  const json = result.data;
  console.log("here: ", json);

  if (json) {
    ElMessage.success("成功从后端获取数据");
    chartData.value = json;
    setChart();
  } else {
    ElMessage.error("没有从后端获取到数据");
  }
};

const setChart = () => {
  let dom: any = document.getElementById("chart-data");
  object = echarts.init(dom);
  const rowData = chartData.value.map((item) => item.time);
  const columnData = chartData.value.map((item) => item.count);

  const option = {
    // ... keep the same option configuration ...
  };

  object.setOption(option);
  object.resize();
};

const getOption = () => {
  // ... keep the same getOption implementation ...
};
</script>
